<template>
  <div class="dashboard-editor-container">
    <el-card shadow="always">
      <el-date-picker
        v-model="dateValue"
        type="daterange"
        range-separator="至"
        :clearable="false"
        value-format="yyyy-MM-dd"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        size="small"
        style="margin-right: 10px"
        @change="init"
      />
      <el-button
        type="primary"
        plain
        size="mini"
        style="margin-right: 10px"
        @click="viewByTime('week')"
      >只看本周</el-button>
      <el-button
        type="primary"
        plain
        size="mini"
        style="margin-right: 10px"
        @click="viewByTime('month')"
      >只看本月</el-button>
      <el-button
        type="primary"
        plain
        size="mini"
        style="margin-right: 10px"
        @click="init"
      >查询</el-button>
      <el-button
        plain
        size="mini"
        style="margin-right: 10px"
        @click="reset"
      >重置</el-button>
      <el-row :gutter="32">
        <el-col :span="8">
          <p class="ansy-title">访问量 <i class="el-icon-view blue06" /></p>
          <el-row :gutter="14">
            <el-col :span="12">
              <div class="item-title">
                平台预览量
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="一段时间内，用户（含游客）访问网站的数量"
                  placement="top"
                >
                  <i class="icon-font el-icon-warning-outline" />
                </el-tooltip>
              </div>
              <div class="count-num">{{ countData.platformViewCount }}</div>
            </el-col>
            <el-col :span="12">
              <div class="item-title">
                用户登录数
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="一段时间内，用户登陆网站的次数"
                  placement="top"
                >
                  <i class="icon-font el-icon-warning-outline" />
                </el-tooltip>
              </div>
              <div class="count-num">{{ countData.userViewCount }}</div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <p class="ansy-title">用户数 <i class="el-icon-user blue06" /></p>
          <el-row :gutter="14">
            <el-col :span="12">
              <div class="item-title">
                企业用户数 <i class="el-icon-office-building" />
              </div>
              <div class="count-num">
                {{ countData.companyCount }} <span>个</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="item-title">
                学生用户数 <i class="el-icon-attract" />
              </div>
              <div class="count-num">
                {{ countData.studentCount }} <span>个</span>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <el-row :gutter="14" style="margin-top: 14px">
      <el-col :span="12">
        <!-- <el-card shadow="always" class="chart-card">
          <p class="ansy-title no-margin">平台访问量</p>
          <line-chart height="310px" :chart-data="lineChartData" />
        </el-card> -->
        <el-card shadow="always" class="chart-card">
          <p class="ansy-title no-margin">用户访问量</p>
          <line-chart ref="lineChart" height="310px" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="always" class="chart-card">
          <p class="ansy-title no-margin">管理后台模块访问量</p>
          <pie-chart ref="moduleChart" height="310px" />
        </el-card>
        <!-- <el-card shadow="always" class="chart-card">
          <p class="ansy-title no-margin">学生端口访问分布</p>
          <pie-chart height="310px" />
        </el-card> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LineChart from './dashboard/LineChart'
import PieChart from './components/PieChart'
import { getUserPV } from '@/api/school-admin-api/platform'
import {
  getGropViewCount,
  getOperateLogCount,
  getRegisterCompanyCount,
  getRegisterStudentCount,
  getMonthViewCount,
  getStudentGroupCount
} from '@/api/company-admin-api/hireManage'
import moment from 'moment'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'Index',
  components: {
    LineChart,
    PieChart
  },
  data() {
    return {
      countData: {
        platformViewCount: 0, // 平台预览量
        userViewCount: 0, // 用户访问量
        companyCount: 0, // 企业用户数
        studentCount: 0 // 学生用户数
      },
      lineChartData: lineChartData.newVisitis,
      dateValue: [
        moment().subtract(6, 'months').format('yyyy-MM-DD'),
        moment().format('yyyy-MM-DD')
      ]
    }
  },
  created() {
    this.init()
  },
  methods: {
    // 快捷查看本周、本月
    viewByTime(type) {
      let startDate, endDate
      if (type === 'week') {
        startDate = moment().startOf('week').add(1, 'day').format('yyyy-MM-DD')
        endDate = moment().format('yyyy-MM-DD')
      } else {
        startDate = moment().startOf('month').format('yyyy-MM-DD')
        endDate = moment().format('yyyy-MM-DD')
      }
      this.dateValue = [startDate, endDate]
    },
    reset() {
      this.dateValue = [
        moment().subtract(6, 'months').format('yyyy-MM-DD'),
        moment().format('yyyy-MM-DD')
      ]
      this.init()
    },
    init() {
      const params = {}
      if (Array.isArray(this.dateValue) && this.dateValue.length === 2) {
        params.startDate = this.dateValue[0] + ' 00:00:00'
        params.endDate = this.dateValue[1] + ' 23:59:59'
      }
      // 企业用户数
      getRegisterCompanyCount(params).then((res) => {
        if (res.code === 0) {
          this.countData.companyCount = res.data
        }
      })
      // 学生总数
      getRegisterStudentCount(params).then((res) => {
        if (res && res.code === 0) {
          this.countData.studentCount = res.data
        }
      })
      // 用户访问量总数
      getUserPV(params).then((res) => {
        if (res && res.code === 0) {
          this.countData.userViewCount = res.data
        }
      })
      // 平台预览量总数
      getOperateLogCount(params).then((res) => {
        if (res && res.code === 0) {
          this.countData.platformViewCount = res.data
        }
      })
      // getStudentGroupCount(params).then((res) => {
      //   if (res && res.code === 0) {
      //     console.log('getGropViewCoun 扇形图t>>', res)
      //     const data = res.data.map((item) => {
      //       return {
      //         value: item.count,
      //         label: item.module
      //       }
      //     })
      //     console.log('data>>>', data)
      //     // this.$refs.moduleChart && this.$refs.moduleChart.initChart(data)
      //   }
      // })
      // 模块访问量，扇形图
      getGropViewCount(params).then((res) => {
        if (res && res.code === 0) {
          console.log('getGropViewCoun 扇形图t>>', res)
          const msg = [
            // 站内信
            '管理后台 -运营端- 站内信类型',
            '管理后台 - 站内信类型',
            '管理后台 -运营端- 站内信',
            '管理后台 - 推送管理'
          ]
          const hire = [ // 招聘
            '管理后台 -企业端- 招聘职位',
            '管理后台 - 收藏备注',
            '管理后台 -企业端- 简历投递记录',
            '管理后台 -企业端- 用户简历',
            '管理后台 -运营端- 简历投递记录',
            '管理后台 -运营端- 招聘职位',
            '管理后台 -运营端- 招聘企业管理',
            '管理后台 -运营端- 面试邀约',
            '管理后台 -企业端- 面试邀约'
          ]
          const studentStyle = [ // 学生风采
            '管理后台 -运营端- 学生风采'
          ]
          const news = [
            // 新闻
            '管理后台 -运营端- 新闻栏目(成果类型)',
            '管理后台 -运营端- 新闻信息(成果信息)',
            '管理后台 - 新闻信息(成果信息)'
          ]
          const other = [// 其他
            '管理后台 -企业端- 企业信息',
            '管理后台 -运营端- 企业管理',
            '管理后台 -运营端- 学生管理',
            '管理后台 -运营端- 运营管理',
            '管理后台 -运营端- 用户简历',
            '管理后台 - 文件存储',
            '管理后台 - 企业账号变更',
            '管理后台 - 代码生成器',
            '管理后台 - 参数配置',
            '管理后台 - 定时任务',
            '管理后台 - 用户',
            '管理后台 - 租户套餐',
            '管理后台 - 菜单',
            '管理后台 - 短信模板',
            '用户 APP - 认证',
            '管理后台 - 权限'
          ]
          console.log('data>>>', other, news, studentStyle, msg, hire)
          const otherObj = {
            value: 0,
            label: '其他'
          }
          const newsObj = {
            value: 0,
            label: '新闻'
          }
          const studentStyleObj = {
            value: 0,
            label: '学生风采'
          }
          const msgObj = {
            value: 0,
            label: '站内信'
          }
          const hireObj = {
            value: 0,
            label: '招聘'
          }
          res.data.map((item) => {
            if (other.indexOf(item.module) > -1) {
              otherObj.value += Number(item.count)
            }
            if (news.indexOf(item.module) > -1) {
              newsObj.value += Number(item.count)
            }
            if (studentStyle.indexOf(item.module) > -1) {
              studentStyleObj.value += Number(item.count)
            }
            if (msg.indexOf(item.module) > -1) {
              msgObj.value += Number(item.count)
            }
            if (hire.indexOf(item.module) > -1) {
              hireObj.value += Number(item.count)
            }
          })
          const data = [otherObj, newsObj, studentStyleObj, , msgObj, hireObj]
          this.$refs.moduleChart && this.$refs.moduleChart.initChart(data)
        }
      })
      // 按月查询用户访问量（已登录），折线图
      getMonthViewCount(params).then((res) => {
        if (res && res.code === 0) {
          console.log('getMonthViewCount 折线图>>', res)
          const data = res.data.map(item => {
            return {
              label: item.countTime,
              value: item.count
            }
          })
          this.$refs.lineChart.initChart(data)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/vars.scss";
.blue06 {
  color: $blue06;
}
.ansy-title {
  @include t14h22;
  font-weight: 600;
}
.no-margin {
  margin: 0;
}
.item-title {
  @include t12h20;
}
.count-num {
  font-size: 22px;
  color: $blue06;
  line-height: 30px;
  span {
    color: #000;
    @include t12h20;
  }
}
.chart-card {
  margin-bottom: 14px;
}
.dashboard-editor-container {
  padding: 14px;
  background-color: rgb(240, 242, 245);
  position: relative;
  height: 100%;
  .chart-wrapper {
    background: #fff;
    padding: 14px 14px 0;
    margin-bottom: 14px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
